<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="../js/ejs.js"></script>
<script src="../js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="../css/zk_home.css">

<body>
    <header>
        <div class="top_nov_box">
            <div class="w1200 taXian">
                <div class="top_logo">
                    <a href="">
                        <img src="../img/zk_logo.png" alt="">
                    </a>
                </div>
                <div class="top_inpu">
                    <form action="" class="taXian">
                        <div>
                            <input type="text" placeholder="请输入搜索关键字">
                        </div>
                        <input type="button" class="butt_box">
                    </form>
                    <script>
                        $(".top_inpu .butt_box").click(function (e) {
                            e.preventDefault()
                            location.href = `https://ai.taobao.com/search/index.htm?key=${$(".top_inpu div>input").val()}`
                        })
                    </script>
                    <ul class="top_inpu_nov">
                        <li><a
                                href="http://redirect.simba.taobao.com/rd?f=http%3A%2F%2Fai.taobao.com%2Fsearch%2Findex.htm%3Fkey%3D%25E9%259B%25AA%25E7%25BA%25BA%25E8%25A1%25AB%26pid%3Dmm_425760018_530150242_109137150485%26tmall%3Dtrue%26unid%3Dzm%26source_id%3Dtdj_search&amp;w=unionapijs&amp;p=mm_425760018_530150242_109137150485&amp;b=display_601_0_0_0_0&amp;c=cn&amp;pvid=0_0_0&amp;k=317b874644f98ccc">雪纺衫</a>
                        </li>
                        <li><a
                                href="http://redirect.simba.taobao.com/rd?f=http%3A%2F%2Fai.taobao.com%2Fsearch%2Findex.htm%3Fkey%3D%25E5%25A5%25B3%25E5%258C%2585%26pid%3Dmm_425760018_530150242_109137150485%26tmall%3Dtrue%26unid%3Dzm%26source_id%3Dtdj_search&amp;w=unionapijs&amp;p=mm_425760018_530150242_109137150485&amp;b=display_601_0_0_0_0&amp;c=cn&amp;pvid=0_0_0&amp;k=317b874644f98ccc">女包</a>
                        </li>
                        <li><a
                                href="http://redirect.simba.taobao.com/rd?f=http%3A%2F%2Fai.taobao.com%2Fsearch%2Findex.htm%3Fkey%3D%25E5%2587%2589%25E9%259E%258B%25E6%2596%25B0%25E5%2593%2581%26pid%3Dmm_425760018_530150242_109137150485%26tmall%3Dtrue%26unid%3Dzm%26source_id%3Dtdj_search&amp;w=unionapijs&amp;p=mm_425760018_530150242_109137150485&amp;b=display_601_0_0_0_0&amp;c=cn&amp;pvid=0_0_0&amp;k=317b874644f98ccc">凉鞋新品</a>
                        </li>
                        <li><a
                                href="http://redirect.simba.taobao.com/rd?f=http%3A%2F%2Fai.taobao.com%2Fsearch%2Findex.htm%3Fkey%3D%25E7%259F%25AD%25E8%25A2%2596T%25E6%2581%25A4%26pid%3Dmm_425760018_530150242_109137150485%26tmall%3Dtrue%26unid%3Dzm%26source_id%3Dtdj_search&amp;w=unionapijs&amp;p=mm_425760018_530150242_109137150485&amp;b=display_601_0_0_0_0&amp;c=cn&amp;pvid=0_0_0&amp;k=317b874644f98ccc">短袖T恤</a>
                        </li>
                        <li><a
                                href="http://redirect.simba.taobao.com/rd?f=http%3A%2F%2Fai.taobao.com%2Fsearch%2Findex.htm%3Fkey%3D%25E5%258D%258A%25E8%25BA%25AB%25E8%25A3%2599%26pid%3Dmm_425760018_530150242_109137150485%26tmall%3Dtrue%26unid%3Dzm%26source_id%3Dtdj_search&amp;w=unionapijs&amp;p=mm_425760018_530150242_109137150485&amp;b=display_601_0_0_0_0&amp;c=cn&amp;pvid=0_0_0&amp;k=317b874644f98ccc">半身裙</a>
                        </li>
                        <li><a
                                href="http://redirect.simba.taobao.com/rd?f=http%3A%2F%2Fai.taobao.com%2Fsearch%2Findex.htm%3Fkey%3D%25E8%2596%2584%25E4%25B8%2583%25E5%2588%2586%25E8%25A3%25A4%26pid%3Dmm_425760018_530150242_109137150485%26tmall%3Dtrue%26unid%3Dzm%26source_id%3Dtdj_search&amp;w=unionapijs&amp;p=mm_425760018_530150242_109137150485&amp;b=display_601_0_0_0_0&amp;c=cn&amp;pvid=0_0_0&amp;k=317b874644f98ccc">薄七分裤</a>
                        </li>
                        <li><a
                                href="http://redirect.simba.taobao.com/rd?f=http%3A%2F%2Fai.taobao.com%2Fsearch%2Findex.htm%3Fkey%3D%25E5%25B8%2586%25E5%25B8%2583%25E9%259E%258B%26pid%3Dmm_425760018_530150242_109137150485%26tmall%3Dtrue%26unid%3Dzm%26source_id%3Dtdj_search&amp;w=unionapijs&amp;p=mm_425760018_530150242_109137150485&amp;b=display_601_0_0_0_0&amp;c=cn&amp;pvid=0_0_0&amp;k=317b874644f98ccc">帆布鞋</a>
                        </li>
                        <li><a
                                href="http://redirect.simba.taobao.com/rd?f=http%3A%2F%2Fai.taobao.com%2Fsearch%2Findex.htm%3Fkey%3D%25E5%2587%2589%25E5%25B8%25AD%26pid%3Dmm_425760018_530150242_109137150485%26tmall%3Dtrue%26unid%3Dzm%26source_id%3Dtdj_search&amp;w=unionapijs&amp;p=mm_425760018_530150242_109137150485&amp;b=display_601_0_0_0_0&amp;c=cn&amp;pvid=0_0_0&amp;k=317b874644f98ccc">凉席</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="top_nov_list">
            <div class="w1200 taXian">
                <div class="top_nov_list_l1">
                    <a href="/html/zk_home.html">首页</a>
                    <a href="/html/Ljy.html?id=sales">好价</a>
                    <a href="/html/Lhaowu.html?id=goods">好物</a>
                    <a href="/html/haodian.html?id=shop">好店</a>
                    <a href="/html/Ltuangou.html?id=tuan">团购</a>
                </div>
                <div class="top_nov_list_l2">
                    <a href="/html/zk_sign.html">登录</a>
                    <a href="/html/zk_sign_in.html">注册</a>
                </div>
                <script>
                    //获取L2中的内容
                    var kill = document.querySelector(".top_nov_list_l2")
                    //创建正则表达式.
                    var condition = /\/.+\//
                    //寻找符合正则表达式的值.
                    var arr = document.cookie.match(condition)
                    //初始化用户名.
                    var user = ""
                    //如果有符合表达式的值,则运行函数.
                    arr != null ? (function () {
                        arr.forEach(function (item) {
                            //将用户名保存到user变量中
                            user = item.includes("user") ? item : ""
                        })
                        //提取user变量中的用户名
                        user = user.substring(user.indexOf("user=") + 5, user.length - 1)
                        //如果用户名不为空
                        if (user) {
                            //替换L2中的标签内容,更换成用户名
                            kill.innerHTML = `
                            <a href="/html/zk_sign.html" class="user">${user}</a>
                            <a href="javascript:tuichu();">退出</a>`
                        }
                    })() : user = ""
                    function tuichu() {
                        //当退出被点击时,删除cookie的值
                        var time = new Date()
                        time.setDate(time.getDate() - 1)
                        console.log(time)
                        document.cookie = `/user=${user}/;expires=${time}`
                        setTimeout(function () {
                            location.reload()
                        }, 800)
                    }
                </script>
                <a href="">爆料投稿</a>
            </div>
        </div>
    </header>
    <main>
        <div class="main_box">
            <div class="w1200">
                <div class="banner_box taXian">
                    <div class="banner_list">
                        <span class="banner_list_new">热门分类</span>
                        <div class="banner_list_box">
                            <a href="zk_random.html?id=c1">手机数码</a>
                            <em></em>
                            <a href="zk_random.html?id=c2">电脑办公</a>
                            <a href="zk_random.html?id=c3">钟表首饰</a>
                            <em></em>
                            <a href="zk_random.html?id=c4">美妆护肤</a>
                            <a href="zk_random.html?id=c5">家居日用</a>
                            <em></em>
                            <a href="zk_random.html?id=c6">家电影音</a>
                            <a href="zk_random.html?id=c7">服饰运动</a>
                            <em></em>
                            <a href="zk_random.html?id=c8">图书礼品</a>
                            <a href="zk_random.html?id=c9">零食饮品</a>
                            <em></em>
                            <a href="zk_random.html?id=c10">母婴玩具</a>
                            <a href="zk_random.html?id=c11">汽车用品</a>
                            <em></em>
                            <a href="zk_random.html?id=c1" style="color: #c00;">9块9包邮</a>
                        </div>
                        <span class="banner_list_new t20">热门导航</span>
                        <div class="banner_list_box">
                            <a href="/html/Ljy.html?id=sales">好价</a>
                            <a href="/html/Lhaowu.html?id=goods">好物</a>
                            <a href="/html/haodian.html?id=shop">好店</a>
                            <a href="/html/Ltuangou.html?id=tuan">团购</a>
                            <a href="">天猫</a>
                            <a href="">淘宝</a>
                        </div>
                    </div>
                    <div class="banner_imag">
                        <ul class="banner_imag_box">
                            <li><img src="../img/zk_banner_1.jpg" alt=""></li>
                            <li><img src="../img/zk_banner_2.jpg" alt=""></li>
                            <li><img src="../img/zk_banner_3.jpg" alt=""></li>
                        </ul>
                        <div class="lef_rig_box">
                            <span></span>
                            <span></span>
                        </div>
                        <ol class="banner_imag_butt">
                            <li class="on"></li>
                            <li></li>
                            <li></li>
                        </ol>
                    </div>
                </div>
            </div>
            <div class="w1200">
                <div class="rendering_list_box taXian">
                    <div class="rendering_list_left">
                        <div class="rob_commodity taXian">
                            <div class="title taXian">
                                <h2>今日抢购</h2>
                                <span>特价不停</span>
                                <a href="">查看更多></a>
                                <!-- A跳转到团购预留 -->
                            </div>
                            <!-- 所有A标签预留  id=???-->
                            <ul class="rob_list_box rob_commodity_list taXian">
                                <li>
                                    <div class="pic_box">
                                        <a href="">
                                            <span class="pic_icon"></span>
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s154x154/g5/M00/0C/07/ChMkJl3XV_eIRRlGAAF-IkmYnFIAAvXPgAiF_gAAX46962.jpg"
                                                alt="">
                                        </a>
                                    </div>
                                    <div class="pic_text">
                                        <a href="">
                                            ThinkPad P53(07CD)(i7-9850H 16G 256GSSD+2T T2000 4G独显 3年保) 黑色
                                        </a>
                                    </div>
                                    <div class="foot_price">
                                        <span class="f12">¥</span>22999
                                        <span class="original c999 f12">¥28499</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic_box">
                                        <a href="">
                                            <span class="pic_icon"></span>
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s154x154/g5/M00/0C/07/ChMkJl3XV_eIRRlGAAF-IkmYnFIAAvXPgAiF_gAAX46962.jpg"
                                                alt="">
                                        </a>
                                    </div>
                                    <div class="pic_text">
                                        <a href="">
                                            ThinkPad P53(07CD)(i7-9850H 16G 256GSSD+2T T2000 4G独显 3年保) 黑色
                                        </a>
                                    </div>
                                    <div class="foot_price">
                                        <span class="f12">¥</span>22999
                                        <span class="original c999 f12">¥28499</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic_box">
                                        <a href="">
                                            <span class="pic_icon"></span>
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s154x154/g5/M00/0C/07/ChMkJl3XV_eIRRlGAAF-IkmYnFIAAvXPgAiF_gAAX46962.jpg"
                                                alt="">
                                        </a>
                                    </div>
                                    <div class="pic_text">
                                        <a href="">
                                            ThinkPad P53(07CD)(i7-9850H 16G 256GSSD+2T T2000 4G独显 3年保) 黑色
                                        </a>
                                    </div>
                                    <div class="foot_price">
                                        <span class="f12">¥</span>22999
                                        <span class="original c999 f12">¥28499</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic_box">
                                        <a href="">
                                            <span class="pic_icon"></span>
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s154x154/g5/M00/0C/07/ChMkJl3XV_eIRRlGAAF-IkmYnFIAAvXPgAiF_gAAX46962.jpg"
                                                alt="">
                                        </a>
                                    </div>
                                    <div class="pic_text">
                                        <a href="">
                                            ThinkPad P53(07CD)(i7-9850H 16G 256GSSD+2T T2000 4G独显 3年保) 黑色
                                        </a>
                                    </div>
                                    <div class="foot_price">
                                        <span class="f12">¥</span>22999
                                        <span class="original c999 f12">¥28499</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic_box">
                                        <a href="">
                                            <span class="pic_icon"></span>
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s154x154/g5/M00/0C/07/ChMkJl3XV_eIRRlGAAF-IkmYnFIAAvXPgAiF_gAAX46962.jpg"
                                                alt="">
                                        </a>
                                    </div>
                                    <div class="pic_text">
                                        <a href="">
                                            ThinkPad P53(07CD)(i7-9850H 16G 256GSSD+2T T2000 4G独显 3年保) 黑色
                                        </a>
                                    </div>
                                    <div class="foot_price">
                                        <span class="f12">¥</span>22999
                                        <span class="original c999 f12">¥28499</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="rob_commodity taXian">
                            <div class="title taXian">
                                <h2 class="benefit_buy">惠买专辑</h2>
                                <span>甄选优质好物</span>
                                <a href="">查看更多></a>
                                <!-- A跳转到团购预留 -->
                            </div>
                            <!-- 所有A标签预留  id=???-->
                            <ul class="rob_commodity_list bft_list_box taXian">
                                <li>
                                    <div class="pic_box">
                                        <a href="">
                                            <span class="pic_icon"></span>
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s200x200c/g5/M00/0D/09/ChMkJ14hPtqIQEj4AAD_8AfKkz8AAwbWgHy1MEAAQAI442.jpg"
                                                alt="">
                                        </a>
                                    </div>
                                    <div class="pic_text">
                                        <a href="">
                                            华为VR和酷睿视对比评测：画质被秒杀，你猜会是谁
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic_box">
                                        <a href="">
                                            <span class="pic_icon"></span>
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s200x200c/g5/M00/0D/09/ChMkJ14hPtqIQEj4AAD_8AfKkz8AAwbWgHy1MEAAQAI442.jpg"
                                                alt="">
                                        </a>
                                    </div>
                                    <div class="pic_text">
                                        <a href="">
                                            华为VR和酷睿视对比评测：画质被秒杀，你猜会是谁
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic_box">
                                        <a href="">
                                            <span class="pic_icon"></span>
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s200x200c/g5/M00/0D/09/ChMkJ14hPtqIQEj4AAD_8AfKkz8AAwbWgHy1MEAAQAI442.jpg"
                                                alt="">
                                        </a>
                                    </div>
                                    <div class="pic_text">
                                        <a href="">
                                            华为VR和酷睿视对比评测：画质被秒杀，你猜会是谁
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic_box">
                                        <a href="">
                                            <span class="pic_icon"></span>
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s200x200c/g5/M00/0D/09/ChMkJ14hPtqIQEj4AAD_8AfKkz8AAwbWgHy1MEAAQAI442.jpg"
                                                alt="">
                                        </a>
                                    </div>
                                    <div class="pic_text">
                                        <a href="">
                                            华为VR和酷睿视对比评测：画质被秒杀，你猜会是谁
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic_box">
                                        <a href="">
                                            <span class="pic_icon"></span>
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s200x200c/g5/M00/0D/09/ChMkJ14hPtqIQEj4AAD_8AfKkz8AAwbWgHy1MEAAQAI442.jpg"
                                                alt="">
                                        </a>
                                    </div>
                                    <div class="pic_text">
                                        <a href="">
                                            华为VR和酷睿视对比评测：画质被秒杀，你猜会是谁
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- 大模块渲染开始 -->
                        <div class="commodity_collection_box">
                            <div class="tab_title">
                                <h2 class="on">精选好价</h2>
                                <h2>达人推荐</h2>
                                <h2>精选好物</h2>
                            </div>
                            <ul class="commodity_collection">
                                <!-- <li class="taXian">
                                    <div class="pic_box">
                                        <a href="">
                                            <img src="https://img.alicdn.com/bao/uploaded/i1/2498370535/O1CN01UGrSPI1Fp4Spusftm_!!0-item_pic.jpg_400x400q100.jpg"
                                                alt="">
                                        </a>
                                    </div>
                                    <div class="info_box">
                                        <h2>
                                            <a href="">锦食阁俄罗斯紫皮糖进口kdv糖果kpokaht巧克力500g年货网红零食品</a>
                                            <font>
                                                17.8元 包邮(需用券)
                                            </font>
                                        </h2>
                                        <div class="pic_text"><a href="">查看详情</a></div>
                                        <div class="footer_info">
                                            <div class="footer_info_f1">
                                                <p>
                                                    <img src="https://icon.zol-img.com.cn/products/v4/b2c-icon/taobao44.png"
                                                        alt="">
                                                    淘宝
                                                    <span>月销104.91万</span>
                                                </p>
                                            </div>
                                            <div class="footer_info_f2">
                                                <a href="">领券立减3元</a>
                                                <a href="">去看看></a>
                                            </div>
                                        </div>
                                    </div>
                                </li> -->

                            </ul>
                            <div class="commodity_collection_ex">已全部加载</div>
                        </div>
                    </div>
                    <div class="rendering_list_right">
                        <div class="rendering_list_wide">
                            <a href="">
                                <img src="../img/zk_guanggao_1.jpg" alt="">
                            </a>
                        </div>
                        <div class="rendering_list_wide_list">
                            <div class="title taXian">
                                <h2>热门团购</h2>
                                <span>智能潮货Hi购不停</span>
                            </div>
                            <ul class="wide_list_box taXian">
                                <li>
                                    <div class="pic-box">
                                        <a href="">
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s120x120/g2/M00/06/03/ChMlWl1Cir6IfSNcAAB7opX88wQAAMSKQNtTJkAAHu6806.jpg"
                                                alt="">
                                            <span>
                                                <i>ThinkPad NEW S3锋芒（20QCA000CD） 黑色</i>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="foot-price">
                                        ¥5299
                                        <span class="original c999">¥5984</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic-box">
                                        <a href="">
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s120x120/g2/M00/06/03/ChMlWl1Cir6IfSNcAAB7opX88wQAAMSKQNtTJkAAHu6806.jpg"
                                                alt="">
                                            <span>
                                                <i>ThinkPad NEW S3锋芒（20QCA000CD） 黑色</i>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="foot-price">
                                        ¥5299
                                        <span class="original c999">¥5984</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic-box">
                                        <a href="">
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s120x120/g2/M00/06/03/ChMlWl1Cir6IfSNcAAB7opX88wQAAMSKQNtTJkAAHu6806.jpg"
                                                alt="">
                                            <span>
                                                <i>ThinkPad NEW S3锋芒（20QCA000CD） 黑色</i>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="foot-price">
                                        ¥5299
                                        <span class="original c999">¥5984</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic-box">
                                        <a href="">
                                            <img src="https://mercrt-fd.zol-img.com.cn/t_s120x120/g2/M00/06/03/ChMlWl1Cir6IfSNcAAB7opX88wQAAMSKQNtTJkAAHu6806.jpg"
                                                alt="">
                                            <span>
                                                <i>ThinkPad NEW S3锋芒（20QCA000CD） 黑色</i>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="foot-price">
                                        ¥5299
                                        <span class="original c999">¥5984</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="rendering_list_wide">
                            <a href="">
                                <img src="../img/zk_guanggao_2.jpg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="w1200 taXian">
            <div class="foo_left">© 2020 中关村在线 版权所有</div>
            <ul class="foo_right taXian">
                <li><a href="">公司简介</a></li>
                <li><a href="">公司历程</a></li>
                <li><a href="">营销推广</a></li>
                <li><a href="">媒体合作</a></li>
                <li><a href="">品牌大全</a></li>
                <li><a href="">注册账号</a></li>
                <li><a href="">招聘信息</a></li>
                <li><a href="">联系方式</a></li>
                <li><a href="">隐私声名</a></li>
                <li><a href="">站点地图</a></li>
                <li><a href="" style="border-right:none">反馈纠错</a></li>
            </ul>
        </div>
        <div class="go_top">
            <script>
                $(window).scroll(function () {
                    if ($("html").scrollTop() > 400) {
                        $(".go_top").css("display", "block")
                    } else {
                        $(".go_top").css("display", "none")
                    }
                })
                $(".go_top").click(function () {
                    $("html").animate({ scrollTop: 0 }, 1000)
                })
            </script>
        </div>
    </footer>
    <script src="../js/banner.js"></script>
</body>
<script type="text/html" id="rob_list_box">
    <% for(var i = 0;i < 5;i++){ %>
        <li>
            <div class="pic_box">
                <a href="/html/zk_details.html?id=rob/<%= data[i].id %>">
                    <span class="pic_icon"></span>
                    <img src="<%= data[i].img_src %>"alt="">
                </a>
            </div>
            <div class="pic_text">
                <a href="/html/zk_details.html?id=rob/<%= data[i].id %>"><%= data[i].title %></a>
            </div>
            <div class="foot_price">
                <%- data[i].price %>
            </div>
        </li>
    <% } %>
</script>
<script type="text/html" id="bft_list_box">
    <% for(var i = 0;i < 5;i++){ %>
        <li>
            <div class="pic_box">
                <a href="">
                    <span class="pic_icon"></span>
                    <img src="<%= data[i].img_src %>"alt="">
                </a>
            </div>
            <div class="pic_text">
                <a href=""><%= data[i].title %></a>
            </div>
        </li>
    <% } %>
</script>
<script type="text/html" id="wide_list_box">
    <% for(var i = 0;i < 4;i++){ %>
        <li>
            <div class="pic-box">
                <a href="/html/zk_details.html?id=wide/<%= data[i].id %>">
                    <img src="<%= data[i].img_src %>"alt="">
                    <span>
                        <i><%= data[i].title %></i>
                    </span>
                </a>
            </div>
            <div class="foot-price"><%- data[i].price %></div>
        </li>
    <% } %>
</script>
<script type="text/html" id="commodity_collection_0">
        <li class="taXian">
            <div class="pic_box">
                <a href="">
                    <img src="<%= data.img_src %>" alt="">
                </a>
            </div>
            <div class="info_box">
                <h2>
                    <a href=""><%- data.title %></a>
                </h2>
                <div class="pic_text"><%- data.more_txt %></div>
                <div class="footer_info">
                    <div class="footer_info_f1">
                        <p><%- data.source %></p>
                    </div>
                    <div class="footer_info_f2">
                        <a href="" class = "youhui"><%= data.price %></a>
                        <a href="<%= data.look_src %>">去看看></a>
                    </div>
                </div>
            </div>
        </li>
</script>
<script type="text/html" id="commodity_collection_1">
    <li class="taXian">
        <div class="pic_box">
            <a href="">
                <img src="<%= data.img_src %>" alt="">
            </a>
        </div>
        <div class="info_box">
            <h2>
                <a href=""><%- data.title %></a>
            </h2>
            <div class="pic_text"><%- data.pic_text %></div>
            <div class="footer_info">
                <div class="footer_info_f1">
                    <span class = "name"> <%- data.name %></span>
                    <span class = "collect"><%= data.collect %></span>
                    <span class = "commit"><%= data.commit %></span>
                </div>
                <div class="footer_info_f2">
                    <span class = "time"><%= data.time %></span>
                    <a href="<%= data.look_src %>">去看看></a>
                </div>
            </div>
        </div>
    </li>
</script>
<script type="text/html" id="commodity_collection_2">
    <li class="taXian">
        <div class="pic_box">
            <a href="">
                <img src="<%= data.img_src %>" alt="">
            </a>
        </div>
        <div class="info_box">
            <h2>
                <a href=""><%- data.title %></a>
            </h2>
            <div class="pic_text"><%- data.pic_text %></div>
            <div class="footer_info">
                <div class="footer_info_f1">
                    <span class = "name"> <%- data.name %></span>
                    <span class = "collect"><%= data.collect %></span>
                    <span class = "commit"><%= data.commit %></span>
                </div>
                <div class="footer_info_f2">
                    <span class = "time"><%= data.time %></span>
                    <a href="<%= data.look_src %>">去看看></a>
                </div>
            </div>
        </div>
    </li>
</script>
<script>
    $.get("/php/wide.php", { id: "rob" }, function (res) {
        var data = JSON.parse(res)
        console.log(data)
        var html = ejs.render($("#rob_list_box").html(), { data: data })
        $(".rob_list_box").html(html)
    })
    $.get("/php/wide.php", { id: "bft" }, function (res) {
        var data = JSON.parse(res)
        var html = ejs.render($("#bft_list_box").html(), { data: data })
        $(".bft_list_box").html(html)
    })
    $.get("/php/wide.php", { id: "wide" }, function (res) {
        var data = JSON.parse(res)
        var html = ejs.render($("#wide_list_box").html(), { data: data })
        $(".wide_list_box").html(html)
    })
</script>
<!-- 底部懒加载 -->
<script>
    var data_arr = Array;
    var id = 0;
    //声明全局数组,存储服务器返回的数据
    var xuanRan = function (id) {
        //自执行函数接收PHP端口返回的值
        $.get("/php/wide.php", { id: `grp_${id}` }, function (res) {
            var data = JSON.parse(res)
            //将PHP返回的值赋予 data_arr 以便后续调用
            data_arr = data;
            //加载完毕预执行一次,将数据渲染上去
            $(".commodity_collection").html(commodity_xuanRan(id))
        })
    }
    xuanRan(id)
    //由于服务器返回数据是一个异步的过程,所以需要异步执行
    //及接收到服务器返回在执行
    function commodity_xuanRan(id) {
        //如果数组不为0,进行加载
        var html_arr = ""
        if (data_arr.length) {
            $(".commodity_collection_ex").hide()
            var num = data_arr.length < 100 ? data_arr.length : 100;
            //一次加载100条,使用EJS模板进行渲染
            for (var i = 0; i < num; i++) {
                var html = ejs.render($(`#commodity_collection_${id}`).html(), { data: data_arr[i] })
                html_arr += html;
            }
            //删除已经渲染完毕的前100条
            for (var i = 0; i < 100; i++) {
                data_arr.shift()
            }
            return html_arr
        } else {
            $(".commodity_collection_ex").show()
        }
    }
    //滚动事件,如果页面到达底部,则执行
    setTimeout(function () {
        $(window).scroll(function () {
            if ($(window).height() + $("html").scrollTop() >= $("html").height() - 100) {
                //执行渲染
                $(".commodity_collection").append(commodity_xuanRan(id))
            }
        })
    }, 1000)
    $(".commodity_collection_box > .tab_title h2").mouseenter(function () {
        $(this).addClass("on").siblings().removeClass("on")
        xuanRan(id = $(this).index())
    })
</script>
<script>
    $(window).scroll(function () {
        if ($("html").scrollTop() > 50) {
            $(".top_nov_list").css("position", "fixed")
        } else {
            $(".top_nov_list").css("position", "relative")
        }
    })
</script>

</html>